<template>
    <el-dialog @close="cancleAddTool" v-model="dialogVisible" width="30%" title="添加工装夹具清单" destroy-on-close center>
        <template #default>
            <el-form :model="tool" label-width="100px" label-position="left">

                <el-form-item label="工装夹具类型">
                    <el-select
                        style="width: 180px"
                        v-model="tool.toolTypeName"
                        placeholder="请选择工装夹具类型"
                    >
                        <el-option value="" label="全部"/>
                        <el-option v-for="item in toolTypes" :value="item"  :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="工装夹具名称">
                    <el-input v-model="tool.toolName" placeholder="请输入工装夹具名称"/>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input v-model="tool.brand" placeholder="请输入品牌"/>
                </el-form-item>
                <el-form-item label="型号">
                    <el-input v-model="tool.spec" placeholder="请输入型号"/>
                </el-form-item>
                <el-form-item label="工装夹具编码">
                    <el-input v-model="tool.toolCode" placeholder="请输入工装夹具编码"/>
                </el-form-item>
                <el-form-item label="库存数量">
                    <el-input v-model="tool.stock" placeholder="请输入库存数量"/>
                </el-form-item>
                <el-form-item label="可用数量">
                    <el-input v-model="tool.quantityAvail" placeholder="请输入可用数量"/>
                </el-form-item>
                <el-form-item label="保养维护类型">
                    <el-select
                        style="width: 180px"
                        v-model="tool.maintenType"
                        placeholder="请选择保养维护类型"
                    >
                        <el-option value="定期维护" label="定期维护"/>
                        <el-option value="按使用次数维护" label="按使用次数维护"/>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="tool.maintenType=='定期维护'" label="下次保养日期">
                    <el-col :span="11">
                        <el-date-picker
                            v-model="tool.nextMaintenDate"
                            type="date"
                            placeholder="Pick a date"
                            style="width: 100%"
                        />
                    </el-col>
                </el-form-item>
                <el-form-item v-if="tool.maintenType=='按使用次数维护'" label="下次保养周期">
                    <el-input v-model="tool.nextMaintenPeriod" placeholder="请输入下次保养周期"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="tool.status">
                        <el-radio value="1">在库</el-radio>
                        <el-radio value="2">被领用</el-radio>
                        <el-radio value="3">报废</el-radio>
                        <el-radio value="4">维修中</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="tool.remark" aria-placeholder="备注" />
                </el-form-item>
            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addTool">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancleAddTool">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";

// 引入我们申明的tool的api的js
import toolRequest from '../../../api/tool.js';
export default {
    props: ["visible","toolTypes"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加学生的操作结果
    data() {
        return {
            tool: {},// 绑定新增的设备类型信息
            dialogVisible: false,// 添加设备类型窗口的显示与隐藏
        }
    },
     methods: {
        /**
         * 取消添加设备类型的事件
         */
        cancleAddTool(){
            this.tool = {};
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加设备类型
         */
        addTool(){
            toolRequest.addTool(this.tool,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '添加设备类型成功!'
                    });
                    // 通知父组件  操作完成，让父组件关闭窗体
                    this.$emit("optionCompleted");
                }else if(res.code == '300'){
                    this.$message({
                        type: 'warning',
                        message: '类型' + (res.msg.indexOf("toolName") > 0 ?"名称":"编码") + "重复"
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '添加设备类型失败!'
                    });
                }
                this.tool = {};
            });
        },
    }, mounted(props) {
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });
    }
}
</script>